<template>
	<view>
		<!-- 头部标签栏 -->
		<view class="tab">
			<view class="tab-item" v-for="(item, i) in list" :key="i" @click="choose(item)">
				<view class="item" :class="[currentItem.param==item.param?'activited':'']">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 出差申请模块 -->
		<view v-if="currentMes.length" class="travelView">
			<view class="travelBox" v-for="(item,i) in currentMes" :key="i" @click="toDetail(item.applicationId)">
				<!-- flag值必传 -->
				<!-- <navigator :url="'/pages/webViewh5/index?path=/#/myApply?applicationId=' + encodeURIComponent(JSON.stringify(item))"> -->
					<view class="boxTop">
						<view class='boxName'>{{item.travelType}}</view>
						<image v-if="item.applicationStatus == '03'" class='boxType' src="../../static/index/shenpi.png"></image>
						<image v-if="item.applicationStatus == '02'" class='boxType' src="../../static/index/yibohui.png"></image>
						<image v-if="item.applicationStatus == '04'" class='boxType' src="../../static/index/yitongguo.png"></image>
						<image v-if="item.applicationStatus == '10'" class='boxType' src="../../static/index/yichehui.png"></image>
						<image v-if="item.applicationStatus == '11'" class='boxType' src="../../static/index/yiquxiao.png"></image>
					</view>
					<view class="boxMiddle">
						<view class="middleItem">
							<view class="leftItem">出差时间</view>
							<view class="rightItem">{{item.itineraryStartDate}} 至 {{item.itineraryEndDate}}</view>
						</view>
						<view class="middleItem">
							<view class="leftItem">出差行程</view>
							<view class="rightItem line1 " style="width: 450rpx;text-align: right;">{{item.origin[0]}}-{{item.destination.join()}}</view>
						</view>
						<view class="middleItem">
							<view class="leftItem">出差人员</view>
							<view class="rightItem line1" style="width: 450rpx;text-align: right;">{{item.internalStaff.join("、")}}</view>
						</view>
					</view>
					<view class="boxBottom">
						<view class="flex justify_between">
							<view class="leftItem">{{item.applicationId}}</view>
							<view class="rightItem">{{item.applicationDate}}</view>
						</view>
					</view>
				<!-- </navigator> -->
			</view>
		</view>
		<view v-else class="nodata">
			<image src="../../static/img/noapply.png" class='img_top' mode="aspectFill"></image>
			<view class="">暂无申请记录</view>
		</view>
		<view class="newRequest">
			<view class="newButton" @click="newRequest">新建出差申请</view>
		</view>
	</view>
</template>

<script>
	import { travelList } from '@/api/travelApi.js'
	export default {
		data() {
			return {
				current: 1, //page
				currentItem: {
					title: '全部',
					param: ""
				},
				list: [{
					title: '全部',
					param: ""
				}, {
					title: '审批中',
					param: "03"
				}, {
					title: '已通过',
					param: "04"
				},{
					title: '已驳回',
					param: "02"
				}, {
					title: '已撤回',
					param: "10"
				}, {
					title: '已取消',
					param: "11"
				}],
				
				currentMes: [],
				page:1,
				pagesize:10,
				isLoadMore:false,  //是否加载中
				token: ''
			}
		},
		components: {

		},
		onShow() {
			this.getTravelList(this.currentItem.param);
		},
		methods: {
			//点击头部tab栏切换
			choose(arg) {
				// this.current = arg ? arg : ""
				this.currentItem = arg 
				console.log(arg)
				this.getTravelList(arg.param);
			},
			//新建出差申请
			newRequest(){
				uni.navigateTo({
					url: '/pages/webViewh5/index?path=travelApplication',
				});
			},
			//h5出差申请详情
			toDetail(id){
				let param = `myApply?applicationId=${id}`
				uni.navigateTo({
					url: `/pages/webViewh5/index?path=${encodeURIComponent(param)}`,
				});
			},
			/**
			 * 获取出差单列表
			 * @param {String} status 全部空,驳回02，审批中03，通过04，撤回10，取消11
			 * 
			 */
			getTravelList(status, current = 1, append){
				
				let currentMes = []
				travelList({"applicationStatus": status, current}).then(res=>{
					if(res[1].respCode === 'FJKBP0000' && res[1].respCode !==null){
						// 加载更多
						if(append){
							currentMes = res[1].data.records && res[1].data.records.length > 0 ? currentMes.concat(res[1].data.records) : currentMes;
							return false;
						} else {
							currentMes = res[1].data.records
						}
						this.currentMes = currentMes
						//页面信息
						this.total = res[1].data.total
						this.current = res[1].data.current
						this.isLoadMore = false
						uni.stopPullDownRefresh()
					} 
				})
			},
			
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getTravelList(this.currentItem.param)
		},
		//上拉触底函数
		onReachBottom(){
			if(!this.isLoadMore && this.total > this.currentMes){  //此处判断，上锁，防止重复请求
						console.log("上拉触底并符合加载更多条件")
						this.isLoadMore = true
						this.getTravelList(this.currentItem.param, parseInt(this.current)+ 1, true)
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	
	.tab {
		width: 95%;
		height: 90rpx;
		line-height: 110rpx;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		margin-left: 20rpx;
		font-size: 32rpx;
		background: #fff;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tab-item {
		display: inline-block;
		margin: 0rpx 20rpx;
		text-align: center;
	}

	.item {
		color: #666;
		height: 85rpx;
	}

	.activited {
		color: #00bb93;
		border-bottom: 4rpx solid #00bb93;
	}

	.travelView {
		background: #f7f7f7;
		padding: 30rpx 32rpx 120rpx 32rpx;
	}

	.travelBox {
		box-sizing: border-box;
		width: 686rpx;
		// height: 403rpx;
		background: #fff;
		margin-bottom: 48rpx;
		border-radius: 30rpx;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 0, 0, 0.08),
			0rpx 3rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);

		.boxTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 90rpx;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.boxName {
				font-size: 32rpx;
				font-weight: 500;
			}

			.boxType {
				width: 94rpx;
				height: 40rpx;
			}
		}

		.boxMiddle {
			box-sizing: border-box;
			// height: 210rpx;
			margin: 0 32rpx;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.middleItem {
			padding-top: 32rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			.leftItem {
				color: #666;
			}

			.rightItem {
				// width: 450rpx;
				color: #333;
			}
			.line1{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.boxBottom {
			margin: 0 32rpx;
			line-height: 90rpx;
			color: #666;
			font-size: 30rpx;
		}
	}
.newRequest{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 750rpx;
	padding-bottom: 68rpx;
	background-color: #fff;
	.newButton{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #ffa900;
		color: #fff;
		font-size: 36rpx;
	}
}
</style>
